<template>
	<view class="container">
		<view class="top_tab">
			<view :class="activeIndex == index ? 'active_tab' : ''" v-for="(item, index) in tabList" :key="index" @click="tabClick(index)">{{ item }}</view>
		</view>
		<view class="flex_start item" v-for="(item,i) in list" :key="i" v-if="activeIndex == 5">
			<image :src="item.interviewAvatar || '../../static/img/default.png'" class="photo" mode=""></image>
			<view class="flex_start info_box">
				<view class="info">
					<view class="item_name">{{item.interviewNickname || '游客'}}</view>
					<image src="../../static/img/man.png" v-if="item.interviewSex == 1" class="sex_icon" mode=""></image>
					<image src="../../static/img/woman.png" v-if="item.interviewSex == 2" class="sex_icon" mode=""></image>
				</view>
				<view class="">2019-08-25 13:31</view>
			</view>
		</view>
		<view class="job_list" v-if="activeIndex < 5">
			<view class="job_item" v-for="(item, index) in employInfo" :key="index">
				<view class="account">
					<view class="account_tel">订单号{{ item.orderNo }}</view>
					<view class="sign">{{ item.groupId > 0 ? '组团报名' : '直接报名' }}</view>
				</view>
				<view class="person_detail">
					<view class="detail_top">
						<view class="detail_left">
							<image :src="item.avatar?item.avatar:require('../../static/img/default.png')" mode=""></image>
							<view class="time">
								<view class="">{{ item.nickname }}</view>
								<view class="">时间:{{ item.createTimeStr }}</view>
							</view>
						</view>

						<view class="detail_right" @click="detaile(item.id,item.uid)">查看资料</view>
					</view>
					<view class="detail_bottom" v-if="activeIndex == 2">
						<view class=""></view>
						<view class="detail_bottom_right">
							<view class="status">未报到</view>
							<view class="status_btn" @click="recruitJoinStatus(item.id)">确定报到</view>
						</view>
					</view>
					<view class="detail_bottom" v-if="activeIndex == 3">
						<view class=""></view>
						<view class="detail_bottom_right">
							<view class="status">未完成</view>
							<view class="status_btn" @click="sureorder(item.id)">确定完成</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			tabList: ['未处理', '不合格', '已确认', '已报到', '已完成','面试记录'],
			activeIndex: 0,
			employInfo: [],
			id: null,
			status: 2, // 2-完成报名（未处理） 3-已确认 4-已报到  5-已完成  6-未不合格
			page: 1,
			pageSize: 20,
			type:'public',
			list: [],
			listTotal: 0
		};
	},
	onShow() {
		switch (this.type){
			case 'public':
				this.recruitDetail();
				break;
			case 'realtime':
				this.timeOrderDetail();
				break;
			default:
				break;
		}
	},
	onLoad(option) {
		this.id = option.id;
		this.type = option.type;
	},
	methods: {
		getList(){
			var info = {
				recruitId: this.id,
				page: this.page,
				pageSize: this.pageSize
			}
			this.$utils.requert({ url: 'hadInterview', data: info, type: 'post' }).then(res => {
				if (res.code === 1) {
					let data = res.data.list;
					this.listTotal = Math.ceil(res.data.total / this.pageSize)
					if (this.info.page == 1) {
						this.list = this.list.concat(data)
					} else {
						this.list = data
					}
				} else {
					this.$utils.showLayer(res.message);
				}
			});
		},
		tabClick(index) {
			this.page = 1
			this.activeIndex = index;
			switch (index) {
				case 0:
					this.status = 2
					break;
				case 1:
					this.status = 6
					break;
				case 2:
					this.status = 3
					break;
				case 3:
					this.status = 4
					break;
				case 4:
					this.status = 5
					break;	
				case 5:
					this.getList()
					break;	
				}
			this.recruitDetail();
		},
		detaile(id,uid) {
			uni.navigateTo({
				url: '/pages/personalView/personalView?id=' + id + "&uid=" + uid
			});
		},
		//详情获取
		recruitDetail() {
			let data = {
				recruitId: this.id,
				status: this.status,
				page: this.page,
				pageSize: this.pageSize
			};
			this.$utils.requert({ url: 'recruitListByStatus', data: data, type: 'post' }).then(res => {
				if (res.code === 1) {
					// this.$utils.showLayer(res.message)
					this.employInfo = res.data.data;
				} else {
					this.$utils.showLayer(res.message);
				}
			});
		},
		//获取实时用工详情
		timeOrderDetail() {
			this.$utils.requert({ url: 'timeOrderListByStatus', data: {
				recruitId: this.id,
				status:99
			}, type: 'post' }).then(res => {
				if (res.code === 1) {
					// this.$utils.showLayer(res.message)
					this.employInfo = res.data.data;
				} else {
					this.$utils.showLayer(res.message);
				}
			});
		},

		//修改报到状态
		recruitJoinStatus(id) {
			this.$utils.requert({ url: 'recruitJoinStatus', data: { orderId: id, status: 4 }, type: 'post' }).then(res => {
				if (res.code === 1) {
					this.$utils.showLayer(res.message);
					this.recruitDetail();
				} else {
					this.$utils.showLayer(res.message);
				}
			});
		},
		//确定完成工作
		sureorder(id){
			this.$utils.requert({ url: 'recruitJoinStatus', data: { orderId: id, status: 5 }, type: 'post' }).then(res => {
				if (res.code === 1) {
					this.$utils.showLayer(res.message);
					this.recruitDetail();
				} else {
					this.$utils.showLayer(res.message);
				}
			});
		}

	}
};
</script>
<style>
page {
	width: 100%;
	background-color: #f5f4f6;
}
</style>

<style scoped>
.top_tab {
	display: flex;
	justify-content: space-around;
	margin-top: 45rpx;
	margin-bottom: 28rpx;
	align-items: center;
	font-size: 32rpx;
}
.active_tab {
	font-size: 30rpx;
	color: #ff8405;
}
.job_item {
	margin: 0 24rpx 24rpx 24rpx;
	background-color: #fff;
	border-radius: 20rpx;
	padding: 30rpx;
}
.job_item .account {
	display: flex;
	justify-content: space-between;
	padding-bottom: 20rpx;
	border-bottom: 1rpx solid #e6e6e6;
}
.job_item .account .account_tel {
	font-size: 30rpx;
	color: #333333;
}
.job_item .account .sign {
	font-size: 26rpx;
	color: #ff9f08;
}
.job_item .person_detail {
	margin-top: 35rpx;
}
.job_item .person_detail .detail_top {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.job_item .person_detail .detail_left {
	display: flex;
	align-items: center;
}
.job_item .person_detail .detail_left image {
	width: 108rpx;
	height: 108rpx;
	border-radius: 50%;
	margin-right: 22rpx;
}
.job_item .person_detail .detail_left .time {
	font-size: 26rpx;
	color: #999999;
}
.job_item .person_detail .detail_right {
	font-size: 24rpx;
	color: #fff;
	width: 133rpx;
	height: 45rpx;
	text-align: center;
	line-height: 45rpx;
	border-radius: 10rpx;
	background-color: #ffa008;
}
.job_item .person_detail .detail_bottom {
	display: flex;
	align-items: center;
	padding-top: 20rpx;
	border-top: 1rpx solid #e6e6e6;
	margin-top: 20rpx;
	justify-content: space-between;
}
.job_item .person_detail .detail_bottom .detail_bottom_right {
	display: flex;
	align-items: center;
}

.job_item .person_detail .detail_bottom .status {
	font-size: 28rpx;
	color: #999999;
	margin-right: 35rpx;
}
.job_item .person_detail .detail_bottom .status_btn {
	width: 170rpx;
	height: 60rpx;
	font-size: 28rpx;
	color: #fff;
	text-align: center;
	line-height: 60rpx;
	border-radius: 60rpx;
	background: linear-gradient(-90deg, rgba(255, 160, 8, 1), rgba(255, 131, 5, 1));
}
</style>
